<template>
    <div class="ad-container">
        <div class="ad-label">ADVERTISEMENT</div>
        <GoogleAdManager
            v-if="!admNull"
            :id="admId"
            :name="name"
            :parent-page="parentPage"
            :channel="channel"
            @onNullAd="onNullAd"
        />
        <GoogleAd
            v-else
            :id="id"
            :height="height"
            :anchor-ad="anchorAd"
            :parent-page="parentPage"
            :channel="channel"
            @adSuccess="handleAdSuccess"
            @adError="handleAdError"
        />
    </div>
</template>

<script setup>
import { ref } from 'vue'
import GoogleAd from './GoogleAd.vue'
import GoogleAdManager from './GoogleAdManager.vue'
import { useRouter } from 'vue-router'

const props = defineProps({
    id: {
        type: String,
        required: true
    },
    admId: {
        type: String,
        required: true
    },
    name: {
        type: String,
        required: true
    },
    height: {
        type: String,
        default: '100%'
    },
    anchorAd: {
        type: Boolean,
        default: false
    },
    parentPage: {
        type: String,
        default: ''
    }
})

const emit = defineEmits(['adSuccess', 'adError'])
const admNull = ref(false)
const router = useRouter()
const channel = router.currentRoute.value.query.channel || ''

const onNullAd = () => {
    admNull.value = true
}

const handleAdSuccess = () => {
    emit('adSuccess')
}

const handleAdError = () => {
    emit('adError')
}
</script>

<style scoped lang="scss">
.ad-container {
    width: 100%;
    
    .ad-label {
        text-align: center;
        font-size: .8rem;
        margin-bottom: .5rem;
        color: #000;
    }
}
</style> 